<template>
  <div class="role-content-box">
    <!-- 头部搜索 -->
    <div class="content-head">
      <el-form ref="formRef" :model="viewData.searchFormData" :inline="true">
        <el-form-item label="角色">
          <el-input v-model="viewData.searchFormData.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getViewTableList">搜索</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格操作 -->
    <div class="table—operate">
        <el-button type="primary" @click="addHandle">新建角色</el-button>
        <el-button type="primary" plain @click="synchronousData">同步角色</el-button>
    </div>

    <!-- 表格内容 -->
    <el-table :data="viewData.dataList" style="width: 100%;margin:20px 0px" empty-text="暂无数据" border>
        <el-table-column fixed prop="roleName" label="角色名称" width="150" />
        <el-table-column prop="remark" label="说明" min-width="120" />
        <el-table-column prop="createTime" label="创建时间" width="190" />
        <el-table-column fixed="right" label="操作" width="220">
        <!-- <el-table-column fixed="right" label="操作" width="350"> -->
        <template #default="{row}">
            <el-button type="success" size="small" plain @click="editHandle(row)">修改</el-button>
            <!-- <el-button type="primary" size="small" plain>菜单</el-button>
            <el-button type="primary" size="small" plain>字段</el-button> -->
            <el-button :type="row.status === 1 ? 'danger': 'success'" size="small" plain @click="stateHandle(row)">{{row.status === 1 ? '禁用': '启用'}}</el-button>
            <el-button type="danger" size="small" plain @click="deleRoleHandle(row)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
    <Pagination :show="false" @paginationHandle="paginationHandle" :total="viewData.total" />


    <!-- 新增修改弹框 -->
    <addEdit :childConfig='viewData.childConfig' :formData="viewData.formData" @upDrawerStatus="upDrawerStatusHandle" @upViewList="getViewTableList" />
  </div>
</template>


<script setup>
import {reactive} from 'vue'
import { useStore } from 'vuex'
import { ElMessageBox } from 'element-plus'

import { getDingRoles, deleRole, roleStatusUp } from '^/organization/role.js'

import addEdit from './addEdit.vue'
import Pagination from '~/Pagination/index.vue'

const store = useStore()

// header 搜索
const viewData = reactive({
    searchFormData: {}, // 搜索data
    formData: {}, //用于修改
    childConfig: { 
        title: '新增角色',
        DrawerStatus: false, //弹框状态
        confirmFunctionName: '' //执行确认按钮框调用的函数
    },
    dataList: [], //表格列表
    total: 0, //总数
    page: { //分页
        pageSize: 100,
        currentPage: 1
    }
})


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
 * 接口操作
 */
// 同步数据
const synchronousData = () => {
    getDingRoles().then(res => {
        console.log("角色数据同步", res.data.data, res.data.message)
        getViewTableList()
    }, err => {
        console.log("角色数据同步异常", err)
    })
}
// 获取表格数据列表
const getViewTableList = () => {
    const params = {
        ...viewData.searchFormData,
        ...viewData.page
    }
    store.dispatch('getRoleList', params).then(res => {
        viewData.dataList = res.rows
        viewData.total = res.total
    }, err => {
        console.log("角色列表异常", err)
    })
}
getViewTableList()

// 删除表格数据
const deleRoleHandle = ({roleId}) => {
    ElMessageBox.confirm('确定删除该角色吗', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '',
        type: 'warning'
    }).then(() => {
        console.log(roleId)
        deleRole(roleId).then(res => {
            console.log("删除角色成功", res.data.data, res.data.message)
            getViewTableList()
        }, err => {
            console.log("删除角色异常", err)
        })
    }).catch(() => {
        console.log('取消删除')
    })
}
// 禁用状态
const stateHandle = ({roleId, status}) => {
    ElMessageBox.confirm(`确定${status === 1 ? "禁用" : "启用"}该角色吗`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '',
        type: 'warning'
    }).then(() => {
        console.log(roleId)
        status = status === 1 ? 2 : 1
        roleStatusUp({roleId, status}).then(res => {
            console.log("角色成功", res.data.data, res.data.message)
            getViewTableList()
        }, err => {
            console.log("删除角色异常", err)
        })
    }).catch(() => {
        console.log('取消删除')
    })
    
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

// 新增弹框对父组件处理
const upDrawerStatusHandle = (val) => {
    viewData.childConfig.DrawerStatus = val
}

// 子组件对父组件值操作
const addHandle = () => {
    viewData.childConfig = { 
        title: '新增角色',
        DrawerStatus: true, //弹框状态
        confirmFunctionName: 'addHandleApi' //执行确认按钮框调用的函数
    }
    viewData.formData = {}
}
// 修改修改表格某行数据
const editHandle = (row) => {
    viewData.childConfig = { 
        title: '修改角色',
        DrawerStatus: true, //弹框状态
        confirmFunctionName: 'editHandleApi' //执行确认按钮框调用的函数
    }
    console.log(row)
    viewData.formData = row
}
// 翻页监听
const paginationHandle = (page) => {
    viewData.page = page
    getViewTableList()
}
const resetHandle = () => {
    viewData.searchFormData = {}
    getViewTableList()
}
</script>